<template>
  <div class="joe_main">

    <!--    <div class="joe_wallpaper__type">-->
    <!--      <div class="joe_wallpaper__type-title">系统评价</div>-->
    <!--      <ul class="joe_wallpaper__type-list">-->
    <!--        <template v-for="(item,index) in lis">-->
    <!--          <a-badge :count="scoreCensus.length !== 0 ? scoreCensus[index].scoreCount : 0" show-zero>-->
    <!--            <svg-icon :icon-class="item.icon" class="svg-icon-"/>-->
    <!--          </a-badge>-->
    <!--        </template>-->
    <!--      </ul>-->
    <!--    </div>-->

    <div class="joe_census__filing">
      <div class="title">系统评价</div>
      <div class="content">
        <div id="filing">
          <div class="item">
            <div class="wrapper">
              <a-row>
                <a-col :span="1" v-for="(item,index) in lis" :offset="3" :key="index">
                  <a-badge style="cursor: not-allowed"
                           :count="scoreCensus.length !== 0 ? scoreCensus[index].scoreCount : 0" show-zero>
                    <svg-icon :icon-class="item.icon" class="svg-icon-" style="font-size: 30px"/>
                  </a-badge>
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </div>

    <a-card style="margin-top: 20px;border-radius: 8px">
      <article-map/>
      <section style="margin-top: 30px">
        <div title="小陈">
        <span class="_content">
          <div class="joe_card__describe">
            <div class="joe_card__describe-title">小陈</div>
            <div class="joe_card__describe-content">
              <strong>角色：</strong>想当架构师的后端程序员，不想当架构师的程序员都不是一个好的程序员 —— 一个 95 后程序员，来自美丽的沿海城市：<strong>秦皇岛</strong>。
              <br>
              <strong>技能：</strong>主职业是<strong>后端</strong>，前端、运维的技术栈也有所涉及。
              <br>
              <strong><a-icon type="heart" style="color: red" theme="filled"/>一句话：</strong>掌握使用特定的技术并不难，难的是沉下心来深入理解技术底层实现的原理。会写某些代码也并不代表 能力就有多强，IT 从业者要有从宏观上解决问题的思路、方法。
              <br>
              <strong>网站名称的由来：</strong>那是在2020年的夏天，让我在6月12日遇见了她，所以网站名称叫 <strong>June 12</strong>
              <br>
              <strong>爱好：</strong>爱生活、爱学习、爱拼搏、爱大自然、爱运动（尤其是打球=<strong>羽毛球</strong>）、厨艺爱好者（<strong>特级黑暗料理师</strong>）
            </div>
          </div>
        </span>
        </div>
      </section>


    </a-card>

    <div class="joe_wallpaper__type" style="margin-top: 20px">
      <div class="joe_wallpaper__type-title">技术栈</div>
      <ul class="joe_detail__friends">
        <template v-for="item in technologyStackList" >
          <li class="joe_detail__friends-item">
            <a class="contain" :href="item.link" target="_blank" rel="noopener noreferrer" :style="{background: getColor()}">
              <span class="title">{{ item.name }}</span>
              <div class="content">
                <div class="desc"><ants-ellipsis :value="item.introduce" :length="40"/></div>

                <img width="40" height="40" class="avatar lazyloaded"
                     :src="item.logo"  :alt="item.name">
              </div>
            </a>
          </li>
        </template>

      </ul>
    </div>
  </div>
</template>


<script>
import ArticleMap from "@/components/ants/ArticleMap";
import {getAction} from '@/api/manage';
import AntsEllipsis from '@/components/ants/AntsEllipsis'

export default {
  name: 'ArticleAboutMe',
  components: {
    ArticleMap,
    AntsEllipsis
  },
  data() {
    return {
      lis: [
        {
          name: '非常满意',
          score: '100',
          icon: 'very-satisfied'
        }, {
          name: '满意',
          score: '75',
          icon: 'satisfied'
        }, {
          name: '一般',
          score: '50',
          icon: 'commonly'
        }, {
          name: '不满意',
          score: '25',
          icon: 'dissatisfied'
        }, {
          name: '非常不满意',
          score: '0',
          icon: 'very-dissatisfied'
        }
      ],
      url: {
        getScoreCensus: '/articleScore/census',
        getTechnologyStack: '/technologyStack/list'
      },
      scoreCensus: [],
      technologyStackList: []
    }
  },
  created() {
    this.getScoreCensus()
    this.getTechnologyStack()
  },
  methods: {
    // 获取随机色
    getColor() {
      let r = parseInt(Math.random() * 256)
      let g = parseInt(Math.random() * 256)
      let b = parseInt(Math.random() * 256)
      let color = `rgba(${r},${g},${b},0.9)`
      return color
    },
    getScoreCensus() {
      getAction(this.url.getScoreCensus, {}).then(res => {
        if (res.success) {
          this.scoreCensus = res.result
        }
      })
    },
    getTechnologyStack() {
      getAction(this.url.getTechnologyStack, {
        pageSize:1000
      }).then(res => {
        if (res.success) {
          this.technologyStackList = res.result.records
        }
      })
    }
  }

}
</script>

<style>

</style>

